<template>
    <div class="login-wrap">
        <div class="login">
            <h2 class="logo">
                老王商城后台管理系统
            </h2>
            <el-divider></el-divider>
            <el-form ref="loginForm" :model="loginParams" :rules="rules" label-width="80px">
                <el-form-item label="账号" prop="adminname">
                    <el-input v-model="loginParams.adminname" placeholder="管理员名称"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginParams.password" type="password" placeholder="管理员密码"
                        show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitHandler">提交</el-button>
                    <el-button type="primary" @click="resetHandler">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

import { mapActions } from "vuex";
// import {loginAPI} from "@/api/admin";
import { ElMessage } from "element-plus";




export default {
    name: "LoginView",
    data() {
        return {
            loginParams: {
                adminname: "admin",
                password: "123123"
            },
            rules: {
                adminname: [{ required: true, message: "请输入管理员账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入管理员密码", trigger: "blur" }],
            }
        }

    },
    methods: {
        ...mapActions(["loginAndUpdateAuthority"]),
        submitHandler() {
            // 接收回调函数
            // this.$refs.loginForm.validate((bool)=>{
            //     if(bool){
            //         console.log("校验成功",bool);
            //     }
            // });

            this.$refs.loginForm.validate().then(() => {

                // 请求配置都是直接书写在各自页面内,后期维护不方便
                // 1. 先调用登录   2. 调用this.updateAuthority 更新vuex
                // loginAPI(this.loginParams).then((result)=>{
                //     console.log("登录成功",result);

                //     this.updateAuthority(result.data);

                //     ElMessage({
                //         message:"登录成功",
                //         type:"success",
                //     })
                // }).catch(err=>{ 
                //     console.log("登录失败",err);
                //     ElMessage({
                //         type:"error",
                //         message:err.message,
                //     })
                // })

                // 优化方案
                this.loginAndUpdateAuthority(this.loginParams).then(() => {
                    ElMessage({
                        message: "登录成功",
                        type: "success",
                    })
                    let {ReturnUrl} = this.$route.query;
                    if(ReturnUrl){
                        this.$router.replace(ReturnUrl);
                    }else{
                        this.$router.push("/");
                    }
                }).catch(err => {
                    console.log("登录失败", err);
                    ElMessage({
                        type: "error",
                        message: err.message,
                    })
                })




            }).catch(err => {
                console.log("校验失败", err);
            })
        },
        resetHandler() {
            this.$refs.loginForm.resetFields();
        },
    }

}
</script>

<style lang="scss" scoped>
.login-wrap {
    width: 100%;
    height: 100%;
    background: url(https://cas.1000phone.net/cas/images/login/bg.png) no-repeat center center / cover;
}

.logo {
    text-align: center;
    line-height: 60px;
}

.login {
    width: 400px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>